<template>
  <div class="header_contain">
    <div class="handerLeft">
      <!-- 控制菜单栏 -->
      <div class="brand item">
        <i
          class="itemIcon iconhengshuqiehuanshu"
          aria-hidden="true"
          @click="handleSwitch"
          style="font-weight: 100"
        ></i>
      </div>
      <!-- 返回上一页 -->
      <div class="comeback">
        <keep-alive>
          <span @click="handleBack">返回</span>
        </keep-alive>
      </div>
      <!-- 面包屑组件 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item, index) in crumData"
            :key="index"
            :to="item.path"
          >{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <!-- 消息和退出组件 -->
    <div class="operation item">
      <!-- 过期提醒 -->
      <el-badge :value="total" class="subitem">
        <el-button
          class="name"
          size="small"
          @click="handleRecall"
          style="border: none;background: inherit;padding: 0"
        >
          <i class="iconStyle iconcc-bell-o" aria-hidden="true"></i>
        </el-button>
      </el-badge>
      <!-- 退出 -->
      <div style="cursor: pointer" @mouseleave="handleLeave" @click="handleShowMenu">
        <span class="el-div class=dropdown-link" style="color: #666;font-size: 14px">
          {{userName}}
          <i
            class="el-icon-arrow-down el-icon--right"
            style="background-color: #c0c0c0;color: #fff;border-radius: 50%;padding: 2px"
          ></i>
        </span>
        <div class="logout" v-show="hidden" @click="handleLogout">
          <i class="iconicon"></i>
          退出
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <div class="headerRecallDetail" v-show="visible">
      <div class="content" style="width: 650px;padding: 20px;padding-bottom: 0">
        <h3 style="line-height: 20px;text-indent: 10px;text-align: left">过期提醒</h3>
        <div class="close" @click="visible = false">
          <i class="fa fa-times" aria-hidden="true"></i>
        </div>
        <div class="tip" style="line-height: 50px;text-indent: 10px;text-align: left">以下商户版本已经过期：</div>
        <el-table :data="gridData" style="line-height: 20px">
          <el-table-column align="center" prop="user_id" label="商户ID"></el-table-column>
          <el-table-column align="center" prop="sv_ul_name" label="商户名称"></el-table-column>
          <el-table-column align="center" prop="sv_ul_mobile" label="店铺账号"></el-table-column>
          <el-table-column align="center" label="到期时间">
            <template slot-scope="scope">
              <span>{{scope.row.sv_versionexpiration}}</span>
            </template>
          </el-table-column>
        </el-table>
        <span class="toMecbant" @click="handleToUserList">查看更多&gt;&gt;&gt;</span>
        <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      // 面包屑的数据
      crumArr: [],
      visible: false,
      // 下拉菜单内容
      hidden: false,
      // 令牌
      myToken: ""
    };
  },
  props: {
    // 关联菜单栏切换的数据
    crumData: {
      type: Array,
      default: []
    },
    gridData: {
      type: Array,
      default: []
    },
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // 引入登录代理商名
    ...mapState(["userName"]),
    ...mapState(["usertype"])
  },
  methods: {
    // 跳转到商户列表
    handleToUserList() {
      if (this.usertype == 1) {
        this.$message({
          type: "warning",
          message: "您没有操作权限!"
        });
        return;
      }
      this.$router.push({
        path: "/admin/merchant/overdueMerchants"
      });
      this.visible = false;
    },
    // 这个是切换菜单栏状态的事件
    handleSwitch() {
      this.$emit("toggle");
    },
    // 点击读取消息
    handleRecall() {
      this.visible = true;
    },
    // 这个是退出操作的确认框
    handleLogout() {
      this.$confirm("是否退出账号?", "提示", {
        confirmButtonText: "退出",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 清除数据
          sessionStorage.clear();
          // 关闭懒加载
          // 跳转到登录界面
          this.$router.replace("/login");
          // 注销提示
          this.$message({
            type: "success",
            message: "退出成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    },
    // 下拉菜单
    handleShowMenu() {
      this.hidden = true;
    },
    handleLeave() {
      this.hidden = false;
    },
    // 返回上一页
    handleBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
    // 获取令牌
    this.myToken = sessionStorage.getItem("myToken");
  }
};
</script>

<style lang="less">
@deep: ~">>>";
.header_contain {
  display: flex;
  justify-content: space-between;
  color: #000;
  height: 70px;
  .handerLeft {
    display: flex;
    align-items: center;
    .comeback {
      color: #0094ff;
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
      span {
        padding-right: 10px;
        border-right: 1px solid #ccc;
      }
    }
    .breadcrumb {
      margin-left: 10px;
    }
  }
  // 面包屑的样式
  .breadcrumb {
    height: inherit;
  }
  // 弹出框的样式
  .headerRecallDetail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    .content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .close {
      position: absolute;
      top: -10px;
      right: 10px;
      cursor: pointer;
      color: #666;
      font-size: 20px;
    }
    .el-table th.is-leaf {
      background-color: #fafafa;
      color: #252525;
      font-weight: 100;
    }
    .toMecbant {
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      color: #0094ff;
      cursor: pointer;
      padding-right: 20px;
      width: auto;
    }
  }
  .el-pagination__sizes {
    display: none;
  }
  .item {
    display: flex;
    // 这个是切换菜单栏的样式
    &.brand {
      .itemIcon {
        cursor: pointer;
        font-size: 20px;
        font-weight: 100;
      }
    }
    // 这个是右边组件的样式
    &.operation {
      margin-top: 20px;
      line-height: 30px;
      // 系统消息
      .subitem {
        background-color: inherit;
        border: none;
        color: #000;
        padding-left: 0;
        height: 20px;
        cursor: pointer;
        &:hover,
        &:active,
        &:focus {
          background-color: inherit;
          color: #0094ff;
        }
        margin-right: 40px;
        .iconStyle {
          color: rgb(64, 73, 88);
          font-size: 20px;
          margin-left: 5px;
        }
      }
      // 退出
      .logout {
        position: absolute;
        top: 50px;
        right: 20px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 2px 2px 10px 0 #ccc;
        z-index: 999;
      }
    }
  }
}
</style>